<template>
	<view class="u-rela ">
		<!-- #ifdef APP-PLUS -->
		<view class="u-h-88">

		</view>
		<!-- #endif -->
		<view class="bl23_02 u-p-40 u-font-30">
			<view class="u-flex u-row-between">
				<view class="cl_FFF u-weight">
					购物车
				</view>
				<view class="">
					<view class="cl_FFF" @click="rem=2" v-if="rem==1">管理</view>
					<view class="cl_FFF" @click="rem=1" v-else>完成</view>
				</view>
			</view>
		</view>
		<view class="u-p-30 u-w-750 u-auto">
			<view class="u-flex-col u-col-center " v-if="list.length==0">
				<u-image src="https://www.sqkjkj.vip/wxImg/1.png" width='100rpx' height='100rpx'></u-image>
				<view class="cl_999 u-font-30 u-m-t-30">暂无数据</view>
			</view>
			<view class="u-b-r-30 bg_FFFFFF u-m-t-30 u-p-30" v-for="(item,index) in list" :key="index">
				<view class="u-p-b-20 u-flex u-row-between" style="border-bottom: 1rpx solid #F1F1F1FF;">
					<view class="u-flex">
						<view class="u-flex ">
							<u-image src="https://www.sqkjkj.vip/wxImg/car/img3.png" mode="aspectFill" width="40rpx"
								height='40rpx'>
							</u-image>
							<view class="u-m-l-20 u-font-28">{{item.name}}</view>
						</view>
					</view>
					<u-icon name='arrow-right' color='#454545FF'
						@click="$u.route('/pages/shopmassage/shopmassage?num='+item.id)"></u-icon>
				</view>
				<view class="u-m-t-40 u-flex u-p-b-30" v-for="(items,index1) in item.cart_list" :key="index1">
					<view class="">
						<u-image src="https://www.sqkjkj.vip/wxImg/car/img2.png" mode="aspectFill" width="40rpx"
							height='40rpx' v-if="items.checked==1" @click='choes(items,index1)'></u-image>
						<u-image src="https://www.sqkjkj.vip/wxImg/car/img.png" mode="aspectFill" width="40rpx"
							height='40rpx' v-else @click='choes(items,index1)'></u-image>
					</view>
					<view class="u-m-l-20">
						<u-image :src="items.imgs[0]" mode="aspectFill" width="178rpx" height='178rpx'>
						</u-image>
					</view>
					<view class=" u-p-10 u-p-l-20">
						<view class="u-font-28 u-weight">
							<text>{{items.name}}</text>
						</view>

						<view class="u-flex u-m-t-20 cl_454545FF u-font-20 "
							style="background-color: #F8F8F8FF;display: inline-block; padding: 6rpx 10rpx;">
							{{items.spece_value_title}}
						</view>

						<view class=" u-m-t-20">
							<view class="" style="color: #FC3533FF;">￥{{items.price}}</view>

						</view>
						<view class="u-m-t-20 u-w-380 u-flex u-row-right">
							<u-number-box v-model="items.num" @change="valChange(items,index1)"></u-number-box>
						</view>

					</view>
				</view>
			</view>
		</view>
		<view class="u-h-200">

		</view>
		<view class="u-fix u-p-20 u-w-750 bg_FFFFFF bot">
			<view v-if="rem==1" class=" u-flex u-row-between  u-b-r-30">
				<view class="u-flex">
				</view>
				<view class="u-flex">
					<view class="u-font-24">合计:<text>￥{{price}}</text></view>
					<view class=" u-m-l-20 u-w-180 u-h-80 u-l-h-80 u-text-center u-b-r-100 cl_FFF"
						style="background-color: #FC3533FF;" @click="pay_money">结算</view>
				</view>
			</view>
			<view v-if="rem==2" class=" u-flex u-row-between  u-b-r-30">
				<view class="u-flex">
				</view>
				<view class=" u-m-l-20 u-w-180 u-h-80 u-l-h-80 u-text-center u-b-r-100 cl_FFF"
					style="background-color: #FC3533FF;" @click="true_remove">删除</view>

			</view>
		</view>
		<!-- 删除模态框 -->
		<u-modal v-model="show" content="确定要删除该吗?" :show-cancel-button='true' @confirm='remove_list'></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 1,
				// 点击管理
				rem: 1,
				text: '购物车',
				// 样式
				styles: {
					color: '#ffffff',
					fontSize: '29rpx',
					fontWeight: "bold"
				},
				list: [],
				// 选择某个店铺
				num: '',
				// 总价
				price: 0,
				// 单个商品
				one: '',
				guige: '',
				// 全选
				all: 0,
				sku: '',
				// 删除模态框
				show: false
			}
		},
		onShow() {
			this.massage()
			this.price = 0
			this.all = 0
		},
		// watch: {

		// 	// 监听规格数据的变化
		// 	"list": {
		// 		handler(newval, oldval) {
		// 			console.log(newval);
		// 			this.guige = []
		// 			for (var i = 0; i < newval.length; i++) {
		// 				let arr = newval[i].cart_list
		// 				for (let j = 0; j < arr.length; j++) {

		// 				}
		// 			}

		// 		},
		// 		deep: true
		// 	},
		// },
		methods: {
			massage() {
				this.$api.car_list({}, res => {
					// console.log(res);
					this.list = res.data.data.data
					for (var i = 0; i < this.list.length; i++) {
						let arr = this.list[i]
						for (var j = 0; j < arr.cart_list.length; j++) {
							if (arr.cart_list[j].checked == 1) {
								this.price += (arr.cart_list[j].price * 1) * (arr.cart_list[j].num * 1)
								this.sku = arr.cart_list[j].sku
							}

						}

					}
					// console.log(this.price);
				})
			},

			// 点击选中某个店铺
			shop_choes(item, index) {
				if (index == 0) {
					this.num = item.id
					this.$api.shop_list_num({
						shop_all: item.id,
						checked: 1
					}, res => {
						for (var i = 0; i < this.list.length; i++) {
							if (item.id == this.list[i].id) {
								for (var j = 0; j < this.list[i].cart_list.length; j++) {
									this.list[i].cart_list[j].checked = 1
								}
							}

						}

						this.price = 0
						for (var i = 0; i < this.list.length; i++) {
							let arr = this.list[i]
							for (var j = 0; j < arr.cart_list.length; j++) {
								if (arr.cart_list[j].checked == 1) {
									this.price += (arr.cart_list[j].price * 1) * (arr.cart_list[j].num * 1)
								}

							}
						}
					})


				} else {
					this.num = 9999
					this.$api.shop_list_num({
						shop_all: item.id,
						checked: 2
					}, res => {
						for (var i = 0; i < this.list.length; i++) {
							if (item.id == this.list[i].id) {
								for (var j = 0; j < this.list[i].cart_list.length; j++) {
									this.list[i].cart_list[j].checked = 0
								}
							}

						}

						this.price = 0
						for (var i = 0; i < this.list.length; i++) {
							let arr = this.list[i]
							for (var j = 0; j < arr.cart_list.length; j++) {
								if (arr.cart_list[j].checked == 1) {
									this.price += (arr.cart_list[j].price * 1) * (arr.cart_list[j].num * 1)
								}

							}
						}

					})


				}


			},
			// 点击某个商品选中 
			choes(items, index1) {
				if (this.rem == 1) {
					for (var i = 0; i < this.list.length; i++) {
						let arr = this.list[i].cart_list
						if (items.shop_id == this.list[i].id) {
							if (this.list[i].cart_list[index1].checked == 0) {
								this.list[i].cart_list[index1].checked = 1
							} else {
								this.list[i].cart_list[index1].checked = 0

							}

							let massage = {
								cart_id: items.id,
								num: items.num,
								checked: items.checked
							}

							this.add_remove(massage)

						}
					}
					this.price = 0
					for (var i = 0; i < this.list.length; i++) {
						let arr = this.list[i]
						for (var j = 0; j < arr.cart_list.length; j++) {
							if (arr.cart_list[j].checked == 1) {
								this.price += (arr.cart_list[j].price * 1) * (arr.cart_list[j].num * 1)
							}

						}

					}
				} else {
					for (var i = 0; i < this.list.length; i++) {
						let arr = this.list[i].cart_list
						if (items.shop_id == this.list[i].id) {
							// if (this.list[i].cart_list[index1].checked == 0) {
							// 	this.list[i].cart_list[index1].checked = 1
							// } else {
							// 	this.list[i].cart_list[index1].checked = 0
							// }
							for (var j = 0; j < this.list[i].cart_list.length; j++) {
								this.list[i].cart_list[j].checked = 0
							}
							this.list[i].cart_list[index1].checked = 1
							this.sku = this.list[i].cart_list[index1].sku
						}
					}
				}


			},

			valChange(items, index1) {
				this.price = 0
				for (var i = 0; i < this.list.length; i++) {
					let arr = this.list[i]
					for (var j = 0; j < arr.cart_list.length; j++) {
						if (arr.cart_list[j].checked == 1) {
							this.price += (arr.cart_list[j].price * 1) * (arr.cart_list[j].num * 1)
							let massage = {
								cart_id: items.id,
								num: items.num,
								checked: items.checked
							}
							this.add_remove(massage)
						}
					}
				}
			},
			// 点击删除
			true_remove() {
				let nums = 0
				for (var i = 0; i < this.list.length; i++) {
					let arr = this.list[i]
					for (var j = 0; j < arr.cart_list.length; j++) {
						if (arr.cart_list[j].checked == 1) {
							nums = 1
						}

					}

				}
				if (nums == 1) {
					this.show = true
				} else {
					uni.showToast({
						icon: 'error',
						title: '请选择要删除的商品'
					})
				}
			},

			// 点击确定删除
			remove_list() {
				this.$api.car_remove({
					sku: this.sku
				}, res => {
					if (res.data.code == 1) {
						uni.showToast({
							icon: 'none',
							title: '删除成功'
						})
						this.massage()
					}
				})
			},
			// 调取数量增减
			add_remove(massage) {
				this.$api.shop_list_num({
					details: massage
				}, res => {})
			},
			// 点击全选
			all_true(obj) {
				if (obj == 1) {
					this.all = 1

				} else {
					this.all = 0
				}
				setTimeout(() => {
					this.$api.shop_list_num({
						is_all: '1',
						checked: this.all
					}, res => {})
				}, 500)
				for (var i = 0; i < this.list.length; i++) {
					let arr = this.list[i]
					for (var j = 0; j < arr.cart_list.length; j++) {
						arr.cart_list[j].checked = this.all
						this.valChange()

					}
				}
			},
			// 点击结算
			pay_money() {
				if (this.price == 0) {
					uni.showToast({
						icon: 'error',
						title: "请选择商品"
					})
				} else {
					this.$api.true_pays({
						buy_source: 'cart',
						order_type: 2,
						sku_details: '',
						use_coupon: ''
					}, res => {
						if (res.data.code == 1) {
							let arr = res.data.data
							uni.setStorageSync('pay_massage', arr)
							uni.navigateTo({
								url: '/pages/truepay/truepay?num=1&order_type=2&buy_source=cart'
							})
						}
					})
				}

			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background: #F5F5F5FF !important;
		padding-bottom: 50rpx;
	}

	.one {
		width: 750rpx;
		height: 295rpx;
		background: url('https://www.sqkjkj.vip/wxImg/car/img1.png') no-repeat;
		background-size: 100% 100%;
	}

	.bot {
		/* #ifdef H5 */
		bottom: 88rpx;
		/* #endif */
		/* #ifndef H5 */
		bottom: 0rpx;
		/* #endif */
	}
</style>